<template>
  <div class="home-nav">
    <div class="myop">
      <a-menu
        mode="horizontal"
        style="margin-right: 10px"
        @select="selectCurrUser"
      >
        <a-sub-menu>
          <template #title>
            <a-avatar
              v-if="currImageUrl"
              @click="setAvatar"
              :src="currImageUrl"
              style="vertical-align: middle"
            />
            <span
              v-else
              @click="setAvatar"
              style="
                vertical-align: middle;
                font-size: 14px;
                color: #aa0000;
                cursor: pointer;
              "
              >设置头像</span
            >
            <span>&nbsp;&nbsp;</span>
            <span style="vertical-align: middle"
              >{{ currUser.userId }}【{{ currUser.userName }}】</span
            >
          </template>
          <a-menu-item key="people">个人信息</a-menu-item>
          <a-menu-item key="password">密码修改</a-menu-item>
          <a-menu-item key="exit">退出系统</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>
  <a-layout :style="{ marginLeft: '0px' }">
    <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
      <div :style="{ padding: '0px', background: '#fff', textAlign: 'center' }">
        <br />

        <a-card hoverable style="width: 450px; margin: 0 auto">
          <template #cover>
            <img
              style="width: 450px"
              v-if="data.imageSrc"
              :src="data.imageSrc"
            />
          </template>
          <a-card-meta :title="data.question_info.question_content">
            <!-- <template #title>
              <b>{{data.question_info.question_content}}</b>
              <span v-if="data.question_info.question_content.lastIndexOf("?")!=data.question_info.question_content.length">
                <b>?</b>
              </span>
            </template> -->

            <template #description><div id="mailButton"></div></template>
          </a-card-meta>
        </a-card>
        <br />

        <div v-if="data.question_info.mode === '选择题'">
          <a-radio-group v-model="value" @change="onChange">
            <div v-for="item in data.question_info.options">
              <a-radio :style="radioStyle" :value="item">
                {{ item.option_type
                }}<text style="margin-left: 4px; margin-right: 3px">.</text
                ><b> {{ item.option_content }}</b>
              </a-radio>
            </div>
          </a-radio-group>
        </div>
        <div v-if="data.question_info.mode === '填空题'">
          <div>
            <a-input
              :style="{ width: '400px' }"
              placeholder="请输入答案"
              v-model:value="data.input_value"
            />
            <!--<input type="text" v-model = data.input_value>-->
          </div>
        </div>
        <br />
        <a-button  id="confirm" @click="getNext" >
          <template #icon>
            
            <check-outlined style="color:green"/>
          </template>
          <text style="margin-left:5px;margin-right:5px;"> 提交</text>
        </a-button>
        <br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }"
      >众包数据平台 ©2021</a-layout-footer
    >
  </a-layout>
</template>

<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  get,
  del,
  post,
  getBlob,
  tip,
  removeLocalToken,
  setLocalToken,
} from "@/common";
import {
  SmileOutlined,
  AppstoreOutlined,
  SettingOutlined,
  AppstoreAddOutlined,
  CheckSquareOutlined,
  CheckOutlined
} from "@ant-design/icons-vue";
////////////////////////////////////////////

const data = reactive({
  imageSrc: "",
  require_id: "",
  question_info: {},
  choose_value: {},
  input_value: "",
  wait: 0,
});

// const confirmEnding=(str, target)=> {

//   if(str.substr(str.length-target.length,target.length)==target)
//     return true;
//   else
//     return false;
// }

const f = () => {
  console.log(document.getElementById("mailButton"));
  time(document.getElementById("mailButton"), data.question_info.question_id);
};

const time = (obj, question_id) => {
  if (data.wait === 0) {
    //document.getElementById("confirm").setAttribute("disabled", true);
    obj.innerHTML = "请刷新以重新获取题目";
  } else {
    obj.setAttribute("disabled", true);
    obj.innerHTML = "请在" + data.wait + "秒内回答";
    if (question_id != data.question_info.question_id) {
      return;
    }
    data.wait--;
    setTimeout(function () {
      time(obj, question_id);
    }, 1000);
  }
};

const ans = reactive({
  //vetur
  answer: "",
  question_id: "",
});

console.log("funcA!!!");
ans.question_id = "";
ans.ans = "";

const getQues = () => {
  get("/answer/answer/getQues", {}, { loading: false }).then((res) => {
    console.log(res);
    data.question_info = res.data;
    data.wait = Math.ceil(data.question_info.limitTime / 1000); //1000;
    console.log(data.wait);
    f();
    goNext(data.question_info);
  });
};
getQues();
const getNext = () => {
  console.log("choose!");
  if (data.question_info.mode == "选择题") {
    console.log(data.choose_value);
    ans.ans = data.choose_value.option_type;
    ans.question_id = data.question_info.question_id;
    console.log("upload answer!");
    console.log(ans);
  } else if (data.question_info.mode == "填空题") {
    ans.ans = data.input_value;
    ans.question_id = data.question_info.question_id;
    console.log("upload answer!");
    console.log(ans);
  }
  if (ans.question_id != "") {
    submit();
  }
  data.choose_value = {};
};

const submit = () => {
  console.log(ans);
  post("/answer/answer/submit", ans).then((res) => {
    console.log(res);
    getQues();
  });
  ans.question_id = "";
  ans.ans = "";
};

const choose = (item) => {
  data.choose_value = item;
  console.log(data.choose_value);
  //console.log(item);
};

const goNext = (answerDto) => {
  getBlob(
    "/answer/answer/nextPic/" + "/" + answerDto.path,
    { request_id: answerDto.request_id },
    {
      loading: false,
    }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      data.imageSrc = reader.result;
      console.log(data.imageSrc);
    });
    reader.readAsDataURL(blob);
  });
};
const onChange = (e) => {
  data.choose_value = e.target.value;
  console.log("radio checked", e.target.value);
};
//获得当前用户
const currUser = ref({});

const getCurrUser = () => {
  get("/avatar/get_curr-user", {}, { loading: false }).then((res) => {
    currUser.value = res.data;
    console.log("当前用户");
    console.log(currUser.value);
    getAvatar();
  });
};
getCurrUser();

//获得头像
const currImageUrl = ref("");
const getAvatar = () => {
  if (!currUser.value || !currUser.value.avatar) {
    return;
  }
  getBlob(
    "/avatar/avatar/" + currUser.value.avatar,
    {},
    { loading: false }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      currImageUrl.value = reader.result;
    });
    reader.readAsDataURL(blob);
  });
};

const avatarFile = ref(null);
const imageUrl = ref("");
const visible = ref(false);

const setAvatar = () => {
  visible.value = true;
};

const handleChange = (info) => {
  avatarFile.value = info.file;
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    imageUrl.value = reader.result;
  });
  reader.readAsDataURL(info.file);
};

const execUpload = () => {
  const token = getLocalToken();
  console.log("wdnmd");
  console.log(token);
  if (!avatarFile.value) {
    tip.error("请选择头像！");
    return;
  }
  const formData = new FormData();
  formData.append("avatar", avatarFile.value);
  post("/avatar/setavatar", formData).then((res) => {
    tip.success("头像设置成功！");
    visible.value = false;
    getCurrUser();
  });
};

const selectCurrUser = ({ item, key, selectedKeys }) => {
  switch (key) {
    case "exit": //退出系统
      removeLocalToken();
      tip.success("您已成功退出系统，请重新登录！");
      router.push({ path: "/" });
      break;

    case "password": //修改密码简易版
      router.push({ path: "/security/updatepassword" });
      break;

    case "people":
      router.push({ path: "/security/updateInfo" });
      break;
  }
};
</script>

<style>
.home-nav {
  height: 48px;
  width: 100%;
  text-align: center;
  box-shadow: 0px 10px 1px rgba(0, 0, 0, 0.01);
}
.myop {
  width: 100%;
  position: relative;
  display: inline-block;
  text-align: right;
  background-color: white;
}
</style>